import Zoom from "./Zoom.js";
 import Carousel from "./Carousel1.js";
export default class ZoomShow{
    zoom;
    carousel;
    list;
    imglists;
     elems;
   static m=new Map()
     size;
    prev=1;
    constructor(list,elems){
        this.imglists=list;
        this.list=list.skuList;
         this.elems=elems;
        this.elem=document.querySelector(".breadnav");
       this.size=document.querySelector('.size')
        this.elem.style.position="absolute";
        this.zoom=new Zoom();
        this.zoom.appendTo(this.elem);
         this.carousel=new Carousel(this.list[0]);
         this.carousel.appendTo(this.elem);
         this.zoom.setImages( this.imglists);        
         this.elems.addEventListener('click',e=>this.changecolors(e))
         this.size.addEventListener('click',e=>this.changesize(e))   
        this. changeprev(1,this.elems)   
         this.carousel.addEventListener(Carousel.CHANGE_IMAGE_EVENT,e=>this.changeImageHandler(e))
    }
    changesize(e){
        var pos=Array.from(e.path[1].children).indexOf(e.target);
        this.changeprev(pos,this.size)
        ZoomShow.m.delete('size')
        ZoomShow.m.set("size",e.target.innerHTML)
       
    }  
    changecolors(e){    
        console.log(e.target.innerHTML);
        var pos=Array.from(e.path[1].children).indexOf(e.target);   
        this.list.forEach((item,index)=>{   
            if(item.color===e.target.innerHTML){
                this.carousel.setData(item);
               this.changeprev(pos,this.elems)          
            }
        })
        ZoomShow.m.delete('color')
        ZoomShow.m.set("color",e.target.innerHTML)
      
    }
    changeprev(pos,pa){
        Array.from(pa.children)[pos].style.border="1px solid black";
        if(pos!==this.prev){
            Array.from(pa.children)[this.prev].style.border="1px solid  #b1b1bb";
            this.prev=pos
        }
    }
    appendTo(parent){
       
        
        if (typeof parent === "string") parent = document.querySelector(parent);
        if (parent) parent.appendChild(this.elem);
     
         this.carousel.setData(this.list)
    }
     changeImageHandler(e){
      
       
         this.zoom.setImage(e.scr);
       
     }
}